<template>
  <div class="banner-b banxin2 tanxin">
    <div class="swiper-demo">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="item in this.bannerImg"
            :key="item.id"
          >
            <img width="100%" height="100%" :src="item.imageUrl" alt="" />
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
    <div class="banner-b-r">
      <a href="#" class="btn"></a>
      <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
    </div>
  </div>
</template>


<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { BannerApi } from "@/request/api";
export default {
  created() {
    BannerApi().then((res) => {
      console.log(res.data.banners);
      this.bannerImg = res.data.banners;
    });
  },
  updated() {
    new Swiper(".swiper-container", {
      //direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
      effect: "fade",
      autoplay: {
        delay: 1000, //1秒切换一次
      },
    });
  },
  data() {
    return {
      bannerImg: [],
    };
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets//base.less";
.banner-b {
  height: 280px;
  justify-content: flex-start;
  margin-bottom: 20px;
  .swiper-container {
    width: 729px;
    height: 280px;
    margin: 0 auto;
  }
  .swiper-button-prev {
    position: absolute;
    left: 400px;
    color: #ccc;
    top: 255px;
  }
  .swiper-button-next {
    position: absolute;
    right: 400px;
    top: 255px;
    color: #ccc;
  }
  .swiper-pagination {
    transform: translate(350px, -20px);
  }
  .banner-b-r {
    width: 254px;
    height: 280px;
    .btn {
      background: url("https://s2.music.126.net/style/web2/img/index/download.png?c0b82edc744fd585031c774c15782682");
      display: block;
      width: 254px;
      height: 280px;
      background-position: 0 9884px;
      text-indent: -9999px;
    }
    p {
      font-size: 9px;
      text-align: center;
      transform: translateY(-25px);
      color: #999;
    }
  }
}
</style>